<template>
	<view class="page">
		<view class="title">
			4.4.插槽Slots及具名插槽实现组件高度定制化
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://cn.vuejs.org/guide/components/slots.html" text="插槽 Slots"
				color="#007BFF"></uni-link>
		</view>
		<view class="p">
			props一般接收的都是JavaScript
			值,而Slots则可以接收模板内容，简单理解就是HTML代码片段。例如网页的slider结构一般情况下大致结构相同，但是数据不同，展现的方式也不同，推荐使用Slots。以下DEMO是使用子组件来实现的。样式比较冗余，凑合看。
		</view>
		<view class="p">
			Slots在子组件里面预留位置使用name="位置名称"，父组件调用的时候则是 最外层子组件名称，然后加 template 接着v-slot:位置名称 或者 直接#位置名称都可以。
		</view>
		<view class="p">
			<Uisdc-sidebar>
				<template v-slot:title>
					<view class="flex z-2 sidebar-title">
						<view class="item">
							行业新闻
						</view>
						<view class="">
							查看更多
						</view>
					</view>
				</template>
				<template #bg-img>
					<image src="https://image.uisdc.com/wp-content/uploads/2021/05/uisdc-widget-news.jpg" class="bg-img"
						mode="widthFix">
					</image>
				</template>
				<template #main>
					<view class="h2 z-2">
						自动生成详情页的AI工具有哪些？
					</view>
					<view class="des z-2">
						问问各位大佬，有哪些网站能自动生成详情页呢，比较智能一些的，有使用觉得还不错的，麻烦分享分享
					</view>
				</template>
			</Uisdc-sidebar>



			<Uisdc-sidebar>
				<template v-slot:title>
					<view class="flex z-2 sidebar-title" style="z-index: 3;">
						<view class="h2 item"
							style="color: #fff;text-align: center; font-size:56rpx; margin-top: 48rpx;">
							AIGC自学指南
						</view>
					</view>
				</template>
				<template #bg-img>
					<image src="https://image.uisdc.com/wp-content/uploads/2023/05/20230519-zt-AIGC.png" class="bg-img"
						mode="widthFix">
					</image>
					<view class="with-black">

					</view>
				</template>
				<template #main>
					<view class="p des z-2" style="color: #fff;text-align: center;">
						可能是最全的 AIGC 工具和教程合集
					</view>
					<view class="p z-2 center flex">
						<button type="primary" size="mini">查看专题</button>
					</view>
				</template>
			</Uisdc-sidebar>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
</script>

<style lang="scss" scoped>
	.sidebar {
		padding: 24rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 36rpx;

		.sidebar-title {
			margin-bottom: 24rpx;
		}

		.with-black {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: #000;
			opacity: .6;
			z-index: 2;
			-webkit-transition: all .2s;
			-o-transition: all .2s;
			-moz-transition: all .2s;
			transition: all .2s;
		}

		.z-2 {
			position: relative;
			z-index: 2;
		}

		.h2 {
			font-size: 36rpx;
			font-weight: bold;
		}

		.title {
			position: relative;

		}

		.des {
			color: #666;
		}

		.bg-img {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}
	}
</style>